import { useLayoutEffect, useRef, useState } from "react";
import "./App.css";

function queryData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(666)
        }, 2000)
    })
}

function App() {
    /* 
      useLayoutEffect
      1. 里面的内容将放在下次dom渲染之前执行，这样里面修改值之后再次触发渲染，就不会出现闪烁了
      2. 如果里面的逻辑太多，会造成阻塞，除非闪烁太厉害，否则还是用useEffect
      3. 坏处：万一里面的回调执行时间很长，会阻塞页面渲染，导致掉帧
    */
    const [height, setHeight] = useState(100);
    const divRef = useRef()
      useLayoutEffect(() => {
        setHeight(divRef.current.offsetHeight)
      }, [])
     //   useEffect(() => {
     //     setHeight(divRef.current.offsetHeight)
     //   }, [])
  return (
    <>
      <div className="card">
        <div ref={divRef} style={{height: height || 'auto', backgroundColor: 'pink'}}>Content</div>
      </div>
    </>
  );
}

export default App;
